<template>
	<view class="quick-group-list" :style="{padding:padding}">
		<view class="quick-group-list__module bg-hover" v-for="(item,index) in list" :key="index"
			:style="{borderRadius:radius}" @tap="itemToDetail(item,index)">
			<view class="quick-group-list__module-img">
				<u-image width="112rpx" height="112rpx" :src="item.groupIcon"></u-image>
				<u-badge max="99" :value="item[defaultFields.unread]" bgColor="#F53F3F" absolute
					:offset="['-26rpx','-8rpx']"></u-badge>
			</view>
			<view class="quick-group-list__module-content">
				<view class="quick-group-list__module-content__title">{{item.groupName||'-'}}</view>
				<view class="quick-group-list__module-content__desc">创建时间：{{item.createTime||'-'}}</view>
				<view class="quick-group-list__module-content__desc">创建人：{{item.name||'-'}}</view>
			</view>
			<view class="bg-hover" v-if="forceDisplay||item.openId === openId" @tap.stop.prevent="moreHandle(item,index)">
				<u-image width="32rpx" height="32rpx"
					src="https://file.casugn.com/storecompcard/static/img/more_1682229949391.png"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			fields: {
				type: Object,
				default: () => {}
			},
			openId: {
				type: String,
				default: ''
			},
			padding: {
				type: String,
				default: '32rpx'
			},
			radius: {
				type: String,
				default: '8rpx'
			},
			// 强制显示
			forceDisplay: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		computed: {
			defaultFields() {
				return {
					unread: (this.fields && this.fields.unread) || 'unread',
				}
			}
		},
		methods: {
			itemToDetail(item, index) {
				this.$emit('detail', { item, index })
			},
			moreHandle(item, index) {
				this.$emit('detailMore', { item, index })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quick-group-list {

		.quick-group-list__module {
			padding: 24rpx 32rpx;
			background-color: #fff;

			display: flex;
			align-items: center;

			&:nth-child(n+2) {
				margin-top: 24rpx;
			}

			.quick-group-list__module-img {
				position: relative;

				::v-deep .u-badge {
					padding: 0 8rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					border: 2rpx solid #FFFFFF;
				}
			}

			.quick-group-list__module-content {
				padding: 0 20rpx;
				margin-right: auto;

				display: flex;
				flex-direction: column;

				.quick-group-list__module-content__title {
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 44rpx;
				}

				.quick-group-list__module-content__desc {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #747B84;
					line-height: 34rpx;
				}
			}
		}
	}
</style>
